import React from 'react';
import { Button, type ButtonProps } from '@nbase/ui';
import { usePermission } from '~/hooks/usePermission';

/**
 * 权限按钮组件属性
 */
export interface PermissionButtonProps extends ButtonProps {
  /**
   * 权限标识，如 'system:user:create'
   * 如果不传，则不进行权限控制
   */
  permission?: string;
  /**
   * 是否在无权限时隐藏按钮（默认 true）
   * 如果为 false，则无权限时禁用按钮
   */
  hideWhenNoPermission?: boolean;
}

/**
 * 权限按钮组件
 * 根据权限标识控制按钮的显示/隐藏或启用/禁用
 * 
 * @example
 * ```tsx
 * // 无权限时隐藏按钮
 * <PermissionButton permission="system:user:create">新增</PermissionButton>
 * 
 * // 无权限时禁用按钮
 * <PermissionButton permission="system:user:create" hideWhenNoPermission={false}>
 *   新增
 * </PermissionButton>
 * ```
 */
export const PermissionButton: React.FC<PermissionButtonProps> = ({
  permission,
  hideWhenNoPermission = true,
  disabled,
  children,
  ...restProps
}) => {
  const { hasPermission } = usePermission();

  // 如果没有传入权限标识，直接渲染按钮
  if (!permission) {
    return (
      <Button disabled={disabled} {...restProps}>
        {children}
      </Button>
    );
  }

  // 检查是否有权限
  const hasAuth = hasPermission(permission);

  // 无权限时隐藏按钮
  if (!hasAuth && hideWhenNoPermission) {
    return null;
  }

  // 无权限时禁用按钮
  return (
    <Button disabled={disabled || !hasAuth} {...restProps}>
      {children}
    </Button>
  );
};

